<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="styles/styles.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript">
            function startTime() {
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
                var mensagem;
                // add a zero in front of numbers<10
                h = checkTime(h);
                m = checkTime(m);
                s = checkTime(s);
                if (h < 4) {
                    mensagem = "Boa noite!";
                } else {
                    if (h < 12) {
                        mensagem = "Bom dia!";
                    } else {
                        if (h < 18) {
                            mensagem = "Boa Tarde!";
                        } else {
                            mensagem = "Boa noite!";
                        }
                    }
                }
                document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + " - " + mensagem;
                t = setTimeout('startTime()', 500);
            }

            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        </script>
    </head>
    <body onload="startTime()" style="background-color: #33ff33">
        <div class="cabecalho">
            <img src="img/logo-AGE.png" alt="" class="logoAGE"/>
            <img src="img/logo-IFSP.jpg" alt="" class="logoIF"/>
            <div id="txt"></div>
        </div>
    </body>
</html>
